<template>
    <div style="height: 100%">
        <div class="box-main">
            <div class="box-login">
                <div style="font-weight: bolder;text-align: center;margin-bottom: 20px">Himq管理控制台</div>
                <el-form style="text-align: center" :disabled="loading" :rules="rules">
                    <el-form-item>
                        <el-input placeholder="请输入账号" v-model="form.username">
                            <template slot="prepend">账号
                            </template>
                        </el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-input placeholder="请输入密码" show-password
                                  v-model="form.password" type="password">
                            <template slot="prepend">密码
                            </template>
                        </el-input>
                    </el-form-item>
                    <el-button :loading="loading" @click="login" style="width: 100%" type="primary">登录</el-button>
                </el-form>
            </div>
        </div>
        <div class="box-footer">
            <p>西安小码头软件科技有限公司</p>
        </div>
    </div>
</template>

<script>
    import {login} from "../api/himq_http";

    export default {
        name: "AdminLogin",
        data() {
            const password = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请输入密码'));
                }
                callback()
            };
            const username = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请输入账号'));
                }
                callback()
            };
            return {
                loading:false,
                form: {
                    username: '',
                    password: ''
                },
                rules: {
                    username: [
                        {validator: username, trigger: 'blur'}
                    ],
                    password: [
                        {validator: password, trigger: 'blur'},
                    ],
                }
            }
        },
        methods: {
            login() {
                this.loading = true
                let that = this;
                login({
                    username: this.form.username,
                    password: this.form.password
                }).then(
                    resp => {
                        this.loading = false
                        console.log(resp);
                        that.$toast({message:resp.message,type:'success'})
                        localStorage.setItem("token", resp.data.token)
                        that.$router.push({name: 'admin'})
                    },
                    err => {
                        this.loading = false
                        that.$toast({message:err.message})
                    }
                )
            }
        }
    }
</script>

<style lang="less">
    @footer_height: 80px;
    .el-input__inner {
        border-radius: 2px !important;
    }

    body {
        //background:#ECECEC;
    }

    .box-main {
        display: flex !important;
        width: 100%;
        height: calc(~"100vh - @{footer_height}") !important;
        justify-content: center;
    }

    .box-login {
        padding-top: 150px;
        width: 350px;
    }

    .box-footer {
        display: flex;
        justify-content: center;
        height: @footer_height;
        text-align: center;
        align-items: center;
        width: 100%;
        font-size: 15px;
        color: gray;
    }
</style>